<template>
  <!-- 
      v-model绑定的show是用来控制这坨sheet的显示和隐藏
   -->
  <van-action-sheet v-model="show" title="频道管理">
    <!-- 我的频道 -->
    <div class="channel-box">
      <div class="title">
        <span>我的频道</span>
        <van-button @click="isEdit = !isEdit" size="mini" plain type="danger">{{
          isEdit ? "取消" : "编辑"
        }}</van-button>
      </div>

      <!-- 宫格部分 -->
      <van-grid>
        <van-grid-item v-for="(item, index) in myList" :key="item.id">
          <div>
            <!-- active: index == value 判断当前下标是不是父组件传递过来的下标，如果是就高亮了 -->
            <!-- 然后这里我的频道要有点击事件，点击事件里就把被点的下标传递给父 -->
            <!-- 所以要子传父，要用 -->
            <!-- $emit('input', index)：代表把被点的下标用input事件传递给父 -->
            <span
              @click="intoChannel(index)"
              :class="{ active: index == value }"
              >{{ item.name }}</span
            >
            <!-- 图标 -->
            <van-icon
              @click="del(index)"
              v-show="index != 0 && isEdit"
              class="del-icon"
              name="cross"
            />
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 可选频道 -->
    <div class="channel-box">
      <div class="title">
        <span>可选频道</span>
      </div>

      <!-- 宫格部分 -->
      <van-grid>
        <van-grid-item
          v-for="item in optionalList"
          :key="item.id"
          :text="item.name"
          @click="add(item)"
        />
      </van-grid>
    </div>
  </van-action-sheet>
</template>

<script>
// 导入接口
import { setChannelsAPI } from "@/api/channels";
export default {
  // 子要
  //   props: ['myList'],

  // 我需要子传父时能够限制它必须要传
  props: {
    // 要传递的数据名叫myList
    myList: {
      // 必须要传
      required: true,
      // 限制类型，限制只能传数组
      type: Array,
    },

    //   所有频道
    allList: {
      // 必传
      required: true,
      // 数组
      type: Array,
    },

    // 问父组件要的下标
    value: {
      type: Number,
      required: true,
      // 默认值为0
      default: 0,
    },
  },
  data() {
    return {
      show: false,
      // 默认不显示
      isEdit: false,
    };
  },

  methods: {
    // 封装的数据持久化方法
    async saveChannel() {
      // 添加完了就应该把数据长久保存起来，要分情况
      // 看有没有登录，因此要先判断有没有登录
      if (this.$store.state.tokenObj.token) {
        // 因为服务器要求的数组跟myList长得不一样，所以要对myList做映射
        // 用map方法产生一个同等长度的数组
        const channels = this.myList.map((v, i) => {
          return {
            id: v.id,
            seq: i,
          };
        });
        // 发请求
        await setChannelsAPI({
          channels,
        });
      } else {
        // 没有登录,存到本地存储
        localStorage.setItem("hmtt89-channels", JSON.stringify(this.myList));
      }
    },
    add(item) {
      // 把传进来的被点的数据加到我的频道里即可
      this.myList.push(item);
      // 调用持久化方法
      this.saveChannel()
    },
    del(index) {
      // 下标是几就删几
      this.myList.splice(index, 1);
      // 要判断删除的是不是前面的频道，如果是就让当前下标-1
      // 说明：this.value就是当前选中的下标
      if (index < this.value) {
        // 通知父组件去修改下标，修改成当前下标-1
        this.$emit("input", this.value - 1);
      }

      // 调用持久化方法
      this.saveChannel()
    },
    // 我的频道被点的点击事件
    intoChannel(index) {
      this.$emit("input", index);
      // 隐藏子组件
      this.show = false;
    },
  },

  // 计算属性
  computed: {
    // 可选频道 -- 未优化版本
    //   optionalList () {

    //       // 遍历所有频道，判断每个频道在不在我的频道里，不在才过滤出来
    //       const list = this.allList.filter(v => {
    //           // v就是所有频道里的每个频道
    //           // 这个方法是如果找到了返回下标，没找到返回-1
    //           // 还有个方法叫find，其实效果是一样的，只不过如果找到了返回这个元素，没找到返回undefined
    //           const idx = this.myList.findIndex(val => {
    //               // val就是我的频道里的每个频道
    //               // 如果要判断所有频道的每个频道在不在我的频道里
    //               // 就要判断id是否相同，如果相同就证明在里面
    //               if (v.id == val.id) {
    //                   return true
    //               }else {
    //                   return false
    //               }
    //           })
    //           // 判断下标是不是-1，是-1代表不在我的频道里，那就可以过滤出来作为可选频道
    //           if (idx == -1) {
    //               return true // 不在才过滤出来
    //           }else {
    //               return false // 在就不过滤
    //           }
    //       })

    //       return list
    //  }

    // 过滤可选频道 - 优化版本推演
    optionalList() {
      // 遍历所有频道，判断每个频道在不在我的频道里，不在才过滤出来
      //   return this.allList.filter((v) => {

      //     // const idx = this.myList.findIndex((val) => {

      //     // //   if (v.id == val.id) {
      //     // //     return true;
      //     // //   } else {
      //     // //     return false;
      //     // //   }
      //     //   // 因为条件是true要return true，条件是false要return false，所以可以直接return条件
      //     //   return v.id == val.id
      //     // });
      //     // 以上可以简写为下面这句话
      //     // const idx = this.myList.findIndex((val) =>  v.id == val.id);

      //     // // if (idx == -1) {
      //     // //   return true; // 不在才过滤出来
      //     // // } else {
      //     // //   return false; // 在就不过滤
      //     // // }
      //     // return idx == -1

      //     return this.myList.findIndex((val) =>  v.id == val.id) == -1
      //   });

      return this.allList.filter(
        (v) => this.myList.findIndex((val) => v.id == val.id) == -1
      );
    },

    // // 过滤可选频道 - 优化版本
    // optionalList() {
    //   return this.allList.filter(
    //     (v) => this.myList.findIndex((val) => v.id == val.id) == -1
    //   );
    // },
  },
};
</script>

<style lang="less" scoped>
.channel-box {
  padding: 20px;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .del-icon {
    position: absolute;
    right: 5px;
    top: 5px;
  }

  .active {
    color: red;
  }
}
</style>